<div ng-init="init()" class="kmi-layout-content IIoT0109-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="brand-title">
            <div class="custom" ng-if="companyName">
                <div class="title" ng-bind="companyName"></div>
                <img src="" alt="" class="brand">
                <div class="gap"></div>
            </div>
            <div class="digiwin">
                <img src="image/smes_v340/logo_ch.png" alt="">
                <img src="image/smes_v340/logo_en.png" alt="">
            </div>
        </div>
        <div class="header-title" ng-bind="'IIoT0109.title' | translate"></div>
        <div class="header-logo"></div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page list">
            <div ng-show="queryMode != 'list-detail'">
                <div class="C00-content" ng-class="[isClose?'is-close':'', condition_item.data_type]">
                    <div class="trigger-btn-fields">
                        <div class="close-btn" ng-click="isClose = !isClose">
                            <i class="material-icons close">indeterminate_check_box</i>
                            <i class="material-icons open">add_box</i>
                            <div class="kmi-can-click"></div>
                        </div>
                    </div>
                    <div class="kmi-text-fields conditoin-fields">
                        <label class="label" ng-bind="'C00.query_conditon' | translate"></label>
                        <input class="column_name" type="text" ng-model="condition_item.name" readonly="readonly"
                            ng-click="LoadCodeList(condition_item)" placeholder="{{'C00.field'|translate}}"></input>
                        <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                        <input class="query_mode" type="text"
                            ng-if="condition_item.data_type!='C' && condition_item.data_type!='SE'"
                            ng-model="condition_item.query_name" readonly="readonly"
                            ng-click="loadTypeList(condition_item,$index);"
                            placeholder="{{'C00.condition'|translate}}"></input>
                        <div class="tip" ng-if="condition_item.data_type!='C' && condition_item.data_type!='SE'"><i
                                class="material-icons">&#xE5CF;</i></div>
                        <!--日期(Date)-->
                        <input class="column_value" type="text" mdl-datepicker="condition_item.value"
                            ng-if="condition_item.data_type=='D'" placeholder="{{'C00.date'|translate}}"></input>
                        <!--數字(Number)-->
                        <input class="column_value" type="text" mdl-calculater="condition_item.value"
                            ng-if="condition_item.data_type=='N'" placeholder="{{'C00.number'|translate}}"></input>
                        <!--下拉選單(Select)-->
                        <input class="column_value" type="text" ng-model="condition_item.name_value" readonly
                            ng-click="loadSelect(condition_item)" ng-if="condition_item.data_type=='S'"
                            placeholder="{{'common.msg.plz_select'|translate}}"></input>
                        <div class="tip" ng-if="condition_item.data_type=='S'"><i class="material-icons">&#xE5CF;</i>
                        </div>
                        <!--勾選(CheckBox)-->
                        <div class="column_value" class="check-box-content" ng-if="condition_item.data_type=='C'">
                            <button class="mdl-button mdl-js-button kmi-checkbox"
                                ng-repeat="check_value in condition_item.check_values"
                                ng-click="checkValue(condition_item, check_value)">
                                <img
                                    ng-src="{{check_value.checked?'image/icons/check1.png':'image/icons/check0.png'}}"></img>
                                {{check_value.name}}
                            </button>
                        </div>
                        <!--日期區間(Date Start / End)-->
                        <input mdl-datepicker="condition_item.value_s" ng-if="condition_item.data_type=='SE'"
                            style="margin-right: 16px;" mdl-date-max="condition_item.value_e"
                            placeholder="{{'C00.date'|translate}}"></input>
                        <div class="tip" ng-if="condition_item.data_type=='SE'" style="right: 10px; color: #000000;"
                            ng-bind="'~'"></div>
                        <input mdl-datepicker="condition_item.value_e" ng-if="condition_item.data_type=='SE'"
                            style="margin-left: 8px;" mdl-date-min="condition_item.value_s"
                            placeholder="{{'C00.date'|translate}}"></input>
                        <!--文字輸入-->
                        <input class="column_value" type="text" ng-model="condition_item.value"
                            ng-if="!condition_item.data_type" placeholder="{{'C00.value'|translate}}"></input>
                        <!--開窗查詢-->
                        <div class="tip search" ng-if="condition_item.column_query"><i class="material-icons"
                                ng-click="condition_item.column_query(condition_item);">search</i></div>
                        <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--icon_prime"
                            ng-click="addCondition();">
                            <i class="material-icons">add</i>
                        </button>
                    </div>
                    <div class="kmi-text-fields conditoin-fields" ng-if="condition_item.data_type == 'SE'">
                        <label class="label" ng-bind="'common.report.default_date.title' | translate"></label>
                        <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="changeDate(condition_item, 0);"
                            style="width:150px;">
                            <img ng-show="condition_item.date_type!=0" src="image/icons/check0.png"></img>
                            <img ng-show="condition_item.date_type==0" src="image/icons/check1.png"></img>
                            {{'IIoT0109.date_condition.today' | translate}}
                        </button>
                        <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="changeDate(condition_item, 3);"
                            style="width:150px;">
                            <img ng-show="condition_item.date_type!=3" src="image/icons/check0.png"></img>
                            <img ng-show="condition_item.date_type==3" src="image/icons/check1.png"></img>
                            {{'IIoT0109.date_condition.after_three_days' | translate}}
                        </button>
                        <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="changeDate(condition_item, 7);"
                            style="width:150px;">
                            <img ng-show="condition_item.date_type!=7" src="image/icons/check0.png"></img>
                            <img ng-show="condition_item.date_type==7" src="image/icons/check1.png"></img>
                            {{'IIoT0109.date_condition.after_one_week' | translate}}
                        </button>
                        <div style="width: 32px;"></div>
                    </div>
                    <div class="kmi-text-fields" style="height: 60px;align-items: flex-start;">
                        <label class="label" ng-bind="'C00.select_conditon' | translate"
                            style="line-height:34px;"></label>
                        <div class="condition-content perfect-scrollbar" suppress-scroll-x="false">
                            <div class="condition" ng-repeat="condition in conditionList track by $index">
                                <button class="mdl-button mdl-button--icon" ng-click="removeCondition($event, $index);"
                                    style="z-index:1;">
                                    <img src="image/icons/clear.png">
                                </button>
                                <label ng-bind="condition.desc"></label>
                                <div class="kmi-can-click" ng-click="selectCondition($index, condition);"></div>
                            </div>
                        </div>
                    </div>
                    <div class="btn-fields">
                        <div class="kmi-button kmi-button-confrim" ng-click="beforeSearch();" style="width:100px">
                            <label ng-bind="'common.btn.search' | translate"></label>
                            <div class="kmi-can-click"></div>
                        </div>
                        <!-- 20190809 modify by WeiTing for M#60871: 拿掉 ng-disabled，調整成匯出不必先查詢，就能直接按匯出。 -->
                        <div class="kmi-button kmi-button-confrim" style="width:100px" ng-show="can_export">
                            <label ng-bind="'common.btn.export' | translate"></label>
                            <div class="kmi-can-click" ng-click="export();"></div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="switch-content" style="padding-bottom :40px;;" ng-show="queryMode != 'list-detail'">
                <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--icon_prime"
                    ng-click="ganttSetting();">
                    <i class="material-icons">settings</i>
                </button>
            </div>
            <div ng-show="queryMode == 'list-gantt' && !showGanttPanel" class="panel-gantt" style="overflow:auto;">
            </div>
            <div ng-show="queryMode == 'list-gantt' && showGanttPanel" class="panel-gantt" style="overflow:auto;"
                id="panel_gantt">
                <div gantt headers="options.headers" data="data" column-width="options.columnWidth" daily="true"
                    max-height="options.maxHeight" api="registerApi" filter-row="{'content': options.filterName}"
                    view-scale="options.viewScale" sort-mode="['model.seq', 'from']">
                    <gantt-tree header="'IIoT0109.gantt.name' | translate" content="row.model.name"
                        header-content="filterHeader"></gantt-tree>
                    <gantt-table columns="['model.qty', 'model.from', 'model.to']"
                        headers="{'model.qty':('IIoT0109.gantt.qty' | translate), 'model.from':('IIoT0109.gantt.from' | translate), 'model.to':('IIoT0109.gantt.to' | translate)}"
                        formatters="tableColumnFormatters"></gantt-table>
                    <gantt-progress></gantt-progress>
                    <!--<gantt-tooltips content="task.model.name"></gantt-tooltips>-->
                </div>
            </div>
        </div>
        <div class="kmi-layout-footer" ng-show="queryMode == 'list-detail'">
            <button class="mdl-button mdl-button--fab mdl-shadow--custom mdl-button--custom1" ng-click="closeDetail()">
                <i class="material-icons">close</i>
            </button>
        </div>
    </div>
</div>